<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="800" height="600"></canvas>
	<script type="text/javascript">
		

		var oC = document.getElementById('canvas');

		var ctx = oC.getContext('2d');




		function Girl(x,y){
			this.x = x;
			this.y = y;
			//步段  0 1 2 3
			this.step = 0;
		}

		Girl.prototype = {
			update:function(){
				this.step++;
				this.step %= 3;
				this.x +=2;
			},
			render:function(){
				ctx.drawImage(game.image,96*this.step,96*2,96,96,this.x,this.y,96,96);
			}
		};



		function Game(){
			var _this = this;
			this.image = new Image();
			this.image.src = './images/1.png';
			this.image.onload = function(){
				_this.run();
			}
			this.timer = null;
			this.girl = new Girl(100,100);
		}

		Game.prototype = {
			mainLoop:function(){
				ctx.clearRect(0,0,canvas.width,canvas.height);
				this.girl.update();
				this.girl.render();
			},
			run:function(){
				var _this = this;
				this.timer = setInterval(function(){
					_this.mainLoop();
				},80);
			},
			stop:function(){
				clearInterval(this.timer);
			}
		};

		console.log(Game.prototype.constructor)
		var game = new Game();


	</script>
</body>
</html>
